body{
    background-color: #cfcfcf;
}
.external{
    width: 900px;
    display: flex;
    flex-direction: row;
    flex-flow:row wrap;
    

}/*外层*/

.dice{
    width: 100px;
    height: 100px;
    background-color: #323232;
    border-radius: 20%;
    margin-left: 20px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;

}
/*定义所有骰子公有属性 */
/* dice代表骰子，数字代表顺序 */
.dice1{
    
}
.dice2{
    justify-content: center;
}
.dice3{
    justify-content: end;
}
.dice4{
    justify-content: space-between;
}
.dice5{

    flex-direction:column;
    justify-content: space-between;
    align-items: flex-end;
    
}

.dice6 .ball:nth-child(2){
    align-self: center;
}
.dice6 .ball:nth-child(3){
    align-self: flex-end;
}
.dice7{  
   flex-wrap: wrap;  
}
.row{
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;

}
.row:nth-child(2){
    justify-content: center;
}

.dice8{
    justify-content:flex-start;
    align-items: center;
}

.dice9{
    justify-content: center;
    align-items: center;
}

.dice10{
    justify-content: flex-end;
    align-items: center;
}
.dice11{
    justify-content: space-between;
    flex-direction: column;
}
.dice12{
    justify-content: space-between;
    align-items: flex-end;
}
.dice13{
    flex-wrap: wrap;
    align-content: space-between;  
}
.dice13_content{
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
}

.dice14{
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
}

.dice15{
    flex-direction: column-reverse;
}

.dice16{
    flex-direction: column-reverse;
    align-items: center;
}
.dice17{
    flex-direction: column-reverse;
    align-items: flex-end;
}
.dice18 .ball:nth-child(2){
    align-self: center;
}
.dice19{
    justify-content: space-between;

}
.dice19 .ball:nth-child(2){
    align-self: center;
}
.dice20{
    justify-content: space-between;
}
.dice20 .ball:nth-child(2){
    align-self: flex-end;
}

.dice21{
    
}
.dice21_type{
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;

}
.dice21_type:nth-child(2){
    justify-content: center;
}
.dice21_type:nth-child(3){
    justify-content: space-between;

}

.ball{
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 100%;
}


